<template>
    <div >
        <el-tag :closable="routee.name!='home'" :type="isReactive" @contextmenu.prevent.native="rightClick" style="margin:3px" size="mini" effect="plain"  @close="handleClose" @click="handleClick">
            {{ routee.title }}
            <el-dropdown size="mini" trigger="click" ref="dropdownbtn" @command="handleCommand">
                <span class="el-dropdown-link" style="display: none">
                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item command="refresh">刷新</el-dropdown-item> -->
                    <el-dropdown-item command="closeLeft">关闭左侧</el-dropdown-item>
                    <el-dropdown-item command="closeRight">关闭右侧</el-dropdown-item>
                    <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
                    <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-tag>
    </div>

</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name: "tagView",
    props: {
        routee: {
            type: Object,
            required:true
        }
    },
    created(){
    },
    data() {
        return {
           
        }
    }, methods: {
        handleClose(){
            
            if(this.isReactive==""){
                this.$store.commit('deleteTagView',this.routee)  
                this.$emit('change',this.activeTagView.name)
                
            }else{
                this.$store.commit('deleteTagView',this.routee)  
            }
            
           
        },
        handleClick(){
            this.$store.commit("selectTagView",this.routee)
            this.$emit('change',this.routee.name)
            
        },
        handleCommand(command) {
            if(command=="refresh"){
                this.$router.push(tagView.name)
            }
            if(command=="closeLeft"){
                this.$emit('change',this.routee.name)
                this.$store.commit('deleteLeftTagView',this.routee)
                
            }
            if(command=='closeRight'){
                this.$emit('change',this.routee.name)
                this.$store.commit('deleteRightTagView',this.routee)
                
            }
            if(command=='closeOther'){
                this.$emit('change',this.routee.name)
                this.$store.commit('deleteOtherTagView',this.routee)
                
            }
            if(command=='closeAll'){
                this.$emit('change',this.routee.name)
                this.$store.commit('deleteAllTagView',this.routee)
            }
      },
        rightClick(){
            if(this.routee.name!="home"){
                this.$refs.dropdownbtn.show();
            }
            
        },
    },computed:{
        ...mapGetters(['activeTagView']),
        isReactive(){
            return  this.routee.name == this.activeTagView.name?"":"info"
        }
    }
};
</script>

<style></style>